<template>
    <div class="detail" v-if="gameDetailInfo.title">
        <div class="banner-wrap">
            <img :src="gameDetailInfo.backgroundUrl" />
        </div>
        <div class="detail-info">
            <div class="info-hd">
                <img :src="gameDetailInfo.drawingUrl" />
            </div>
            <div class="info-bd">
                <div class="goods-title">{{ gameDetailInfo.title }}</div>
                <p class="p2" style="margin-top: 20px;">分类：{{ gameDetailInfo.typeName }}</p>
                <p class="p2">作者：{{ gameDetailInfo.author }}</p>
                <p class="p2">评论：{{ gameDetailInfo.commentNum }}</p>
                <p class="p2">收藏：{{ gameDetailInfo.collectionNum }}</p>
                <div style="display: flex;">
                    <div class="pay-btn" @click="handlePay">
                        <template v-if="gameDetailInfo.price">
                            <span class="txt">购价</span>¥333
                        </template>
                        <span v-else>免费下载</span>
                    </div>
                    <!-- <div class="pay-btn" @click="handlePay" v-if="!gameDetailInfo.hadAdd">
                        <span>免费下载</span>
                    </div> -->
                    <div class="pay-btn" style="margin-left: 10px;" @click="goPlay">在线试玩</div>
                </div>
            </div>
        </div>
        <div class="detail-img">
            <div class="img-title">游戏截图</div>
            <div class="imgs">
                <template v-if="gameDetailInfo.gameImgList && gameDetailInfo.gameImgList.length">
                    <img v-for="item in gameDetailInfo.gameImgList" :key="item" :src="item" />
                </template>
                <img v-else :src="gameDetailInfo.backgroundUrl" />
            </div>
        </div>
        <div class="detail-img">
            <div class="img-title">描述</div>
            <div class="imgs">
                <p>{{ gameDetailInfo.introduce }}</p>
            </div>
        </div>
        <div class="detail-img yaoqiu">
            <div class="img-title">系统要求</div>
            <div class="imgs">
                <p class="p1">你的电脑未达到所需的最低视频内存。你的体验可能会受到影响。</p>
                <p>适用平台: 电脑</p>
                <p>操作系统:Windows 10 版本 15063.0 或更高版本</p>
                <p>体系结构:x64</p>
                <p>键盘: 集成键盘</p>
                <p>鼠标: 集成鼠标</p>
                <p>DirectX: DirectX12 API，硬件功能级别 11</p>
                <p>内存:8 GB (最低要求)，12 GB(推荐)</p>
                <p>视频内存:2 GB (最低要求),4 GB(推荐)</p>
                <p>处理器: Intel i3-4170 @ 3.7Ghz OR Intel i5 750 @ 2.67Ghz (最低要求),Intel i7-3820 @ 3.6Ghz(推荐)</p>
                <p>图形处理器: NVidia 650TL OR AMD R7 250x(最低要求), NVidia GTX 970 OR NVidia GTX 1060 3GB OR AMD R9 290x OR AMD
                    RX 470(推荐)</p>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getGameDetail, addGame, alipay } from '../api/index'
import { useHandleLogin, useChangeLogin } from '../store'
const router = useRouter()
const route = useRoute()
const loginTypeNum = useHandleLogin()
const isLogin = useChangeLogin()
const gameDetailInfo = ref({})
const typeName = ref('')

watch(isLogin, (newVal) => {
    if (newVal) {
        loginTypeNum.value = 1
        getDetail()
    }
})

const handlePay = async () => {
    try {
        const token = window.localStorage.getItem('token')
        if (!token) {
            loginTypeNum.value = 2
            return
        }
        if (gameDetailInfo.value.price) {
            ElMessageBox.confirm(
                '确定要购买吗？',
                'Warning',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(async () => {
                    const res = await alipay({
                        out_trade_no: `O${(new Date()).getTime()}`,
                        subject: '游戏下单',
                        body: gameDetailInfo.value.title,
                        total_amount: gameDetailInfo.value.price * 100,
                    })
                    console.log('res: ', res)
                    // if (!res.code) {
                    //     window.location.href = res.data
                    // }
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消购买',
                    })
                })
        }
        const res = await addGame({ gameId: gameDetailInfo.value.id })
        if (!res.code) {
            ElMessage.success('加入我的游戏成功！')
        }
    } catch (error) {
        console.log(error);
    }
}
const goPlay = async () => {
    try {
        const token = window.localStorage.getItem('token')
        if (!token) {
            loginTypeNum.value = 2
            return
        }
        router.push({
            name: 'PlayGame',
            query: {
                url: 'https://flash.7k7k.com/cms/cms10/20230428/1009252319/brotatowebpc/index.html'
            }
        })
    } catch (error) {
        console.log(error);
    }
}
async function getDetail() {
    try {
        console.log(route.params.id);
        typeName.value = route.query.name
        const res = await getGameDetail({ gameId: route.params.id })
        console.log('getGameDetail: ', res)
        gameDetailInfo.value = res.data
    } catch (error) {
        console.log(error);
    }
}
onMounted(() => {
    getDetail() 
})
</script>
<style lang="scss" scoped>
.detail {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    .banner-wrap {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        height: 300px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .detail-img {
        width: 90%;
        max-width: 1200px;
        margin: 20px auto;
        box-shadow: 4px 4px 12px 8px #e6e6e6;
        background: #fff;
        padding: 20px 0;
        box-sizing: border-box;
        border-radius: 10px;
        &.yaoqiu {
            .imgs {
                flex-direction: column;
            }
            .p1 {
                font-size: 14px;
                margin-bottom: 10px;
                color: #444;
                font-weight: 600;
            }
            p {
                font-size: 12px;
                margin-bottom: 10px;   
                color: #848484; 
            }
        }
        .img-title {
            font-size: 18px;
            font-weight: 600;
            color: #000;
            padding: 0 0 20px 20px;
            width: 100%;
            border-bottom: 1px solid #cfcfcf;
        }
        .imgs {
            display: flex;
            margin-top: 20px;
            padding-left: 20px;
            img {
                width: 400px;
                height: 200px;
                border-radius: 10px;
                margin-right: 10px;
                object-fit: cover;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
    .detail-info {
        width: 90%;
        max-width: 1200px;
        margin: 20px auto;
        box-shadow: 4px 4px 12px 8px #e6e6e6;
        background: #fff;
        display: flex;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 10px;
        .info-hd {
            width: 200px;
            height: 300px;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 15px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .info-bd {
            .goods-title {
                font-size: 24px;
                font-weight: 700;
                color: #000;
            }
            .p1 {
                font-size: 12px;
                color: #a8a6a6;
                margin-bottom: 20px;
            }
            .p2 {
                font-size: 14px;
                margin-bottom: 20px;
            }
            .pay-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 120px;
                height: 50px;
                background: rgb(0, 103, 184);
                font-size: 14px;
                border-radius: 5px;
                color: #fff;
                cursor: pointer;
                .txt {
                    font-size: 16px;
                    margin-right: 4px;
                }
            }
        }
    }
}
</style>